<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>console的几种用法</title>
	</head>
	<body>
		<script type="text/javascript">
			// 通用打印
			console.log("hello");

			// 分级别日志输出
			console.error("错误信息");
			console.warn("警告信息")
			console.info("提示信息");
			console.debug("调试信息");
			console.trace("跟踪信息");

			// 表格打印
			class Person {
				constructor(firstName, lastName) {
					this.firstName = firstName;
					this.lastName = lastName;
				}
			}
			var family = {};
			family.mother = new Person("Jane", "Smith");
			family.father = new Person("John", "Smith");
			family.daughter = new Person("Emily", "Smith");
			console.table(family);

			// 清空控制台，并输出 Console was cleared
			// console.clear();

			// 断言输出
			for (let number = 2; number <= 5; number += 1) {
				console.assert(number % 2 === 0, number);
			}

			// 高级用法1-格式化输出
			console.log("F1 %.2d", 2.2222);
			console.log("F2 %.2f", 2.2222);

			// 高级用法2-为打印内容定义样式
			console.info("%c Github ", "background:#24272A; color:#ffffff", "https://github.com/cnzeropro");

			// 高级用法3-使用编组
			console.group("first group");
			console.log("Level 1");
			console.group("second group");
			console.log("Level 2");
			console.groupCollapsed("third group")
			console.warn("More of level 3");
			console.groupEnd();
			console.groupEnd();
			console.groupEnd();

			// 高级用法4-定时器
			console.time("answer time");
			alert('点击继续');
			console.timeLog("answer time");
			alert('点击结束');
			console.timeEnd("answer time");
		</script>
	</body>
</html>
